<template>
  <div
    class="echart"
    :id="`pieCharts${unitNumber}`"
    :style="{ float: 'left', width: '100%', height: '1.2rem' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  props: {
    unitNumber: {
      type: Number,
      default: 0,
    },
    seriesData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    seriesData() {
      this.initEcharts();
    },
  },
  methods: {
    // getData(areaId) {
    //   this.$get("/business/business/getAreaDeviceInfo", { areaId }).then(
    //     (res) => {
    //       let data = res.data;
    //       let seriesData = [
    //         {
    //           name: "消防用水",
    //           value: data.waterNumber || 0,
    //         },
    //         {
    //           name: "电气火灾",
    //           value: data.electricalNumber || 0,
    //         },
    //         {
    //           name: "独立烟感",
    //           value: data.smokeNumber || 0,
    //         },
    //         {
    //           name: "可燃气体",
    //           value: data.gasNumber || 0,
    //         },
    //         {
    //           name: "智慧视频",
    //           value: data.viewNumber || 0,
    //         },
    //         {
    //           name: "其他",
    //           value: data.otherNumber || 0,
    //         },
    //       ];
    //       this.initEcharts(seriesData);
    //     },
    //     (err) => {
    //       this.$message.error(err.msg || "系统错误");
    //     }
    //   );
    // },
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    },
    initEcharts() {
      console.log(this.seriesData);
      const option = {
        color: ["#96B5FC", "#5F8CEF", "#F18A70", "#F4C594", "#E0E7FA","#F7E3CB"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          right: "0%",
          top: "10%",
          width: "0",
          textStyle: {
            color: "#E6F7FF",
            fontSize: this.fontSize(0.12),
          },
          itemHeight: this.fontSize(0.12),
        },
        series: [
          {
            name: "报警设备",
            type: "pie",
            radius: ["40%", "60%"],
            center: this.unitNumber==1?["30%", "50%"]:["40%", "50%"],
            avoidLabelOverlap: true,
            label: {
              position: "outside",
              color: "#E6F7FF",
              lineHeight: 18,
              fontSize: this.fontSize(0.12),

              // formatter: (params) => {
              //   const { data } = params;
              //   return data.name ? `${data.name}\n${data.value}` : "";
              // },
            },
            itemStyle: {
              borderColor: "transparent",
            },
            emphasis: {
              scaleSize: 10,
            },
            data: this.seriesData,
          },
        ],
      };

      const myChart = echarts.init(
        document.getElementById(`pieCharts${this.unitNumber}`)
      ); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="less">
canvas {
  height: 1.2rem;
  width: 100%;
}
</style>
